<%--
  Created by IntelliJ IDEA.
  User: zhangDongFei
  Date: 2020/11/17
  Time: 14:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <script src="./layui/layui.js"></script>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
</head>
<style type="text/css">
    body {
        width: 100%;
        max-width: 1920px;
        margin: 0 auto;
    }

    .loginReg-header {
        border: 1px solid #00FF00;
        clear: both;
        width: 100%;
        height: 80px;
        text-align: center;
        margin: 0 auto;
        padding: 20px 0;
    }

    .loginReg-wrapper {
        clear: both;
        width: 100%;
        max-width: 1920px;
        background: url(${pageContext.request.contextPath}/img/login/bg.jpg) no-repeat center top;
        border-top: #F7821B solid 3px;
        margin: 0 auto;
    }

    .reg-height {
        height: 990px;
        background-size: auto 100% !important;
        position: relative;
    }

    .footer {
        clear: both;
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
    }

    img {
        vertical-align: middle;
    }

    .layui-tab-content {
        padding: 0px;
    }

    #canvas {
        width: 100px;
        height: 43px;
        float: right;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
    }

    .layui-btn {
        background: #F08519;
        border-radius: 2px;
        width: 100%;
        padding: 0;
        height: 50px;
        font-size: 22px;
        color: #fff;
    }

    .layui-form-item,
    .layui-input-inline,
    .layui-input {
        height: 45px;
    }

    .layui-form-item .layui-form-label {
        height: 45px;
    }

    .sms-btn {
        width: 100px;
        height: 45px;
        border: 0rem;
        /* background-color: white; */
    }
</style>

<body>
<div class="loginReg-header">
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
</div>
<div class="layui-row loginReg-wrapper reg-height " style="">
    <div class="layui-col-xs12 layui-col-md8 qykhqy" style="height: 100%; display: none;">
        <div class="grid-demo grid-demo-bg1 "
             style="width: 700px; height: 566px; background-color: white; margin-left: 80px; margin-top: 100px;">
            <img src="${pageContext.request.contextPath}/img/login/qykhqy.png">
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md8 vip" style="height: 100%;">
        <div class="grid-demo grid-demo-bg1 "
             style="width: 700px; height: 566px; border: 1px solid black; background-color: white; margin-left: 80px; margin-top: 100px;">
            <img src="${pageContext.request.contextPath}/img/login/vip.jpg">
        </div>
    </div>

    <div class="layui-col-xs6 layui-col-md4" style="height: 100%;">
        <div class="grid-demo layui-tab layui-tab-card" lay-filter="test"
             style="background-color: white; width: 407px; height: 566px; margin-right: 80px; margin-top: 100px;">
            <!-- <div class="layui-tab layui-tab-card" lay-filter="test" style="width: 402px;"> -->
            <ul class="layui-tab-title" style="margin-bottom: 30px;">
                <li class="layui-this" style="width: 377px;">个人注册</li>
            </ul>

            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show"
                     style="width: 367px; height: 524px; margin-left: 20px; margin-right: 20px;">
                    <form class="layui-form layui-form-pane" action="" style="margin-top: 20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline" style="width: 233px">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                                       autocomplete="off"
                                       class="layui-input" style="width: 232px;">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">中国大陆</label>
                            <div class="layui-input-inline" style="width: 233px">
                                <input type="text" name="iphone" required lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off"
                                       class="layui-input" style="width: 232px;">
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">设置密码</label>
                            <div class="layui-input-inline" style="width: 233px">
                                <input type="password" name="pwd" required lay-verify="pwd" placeholder="请输入密码"
                                       autocomplete="off" class="layui-input"
                                       id="pass1" style="width: 233px">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">中国大陆</label>
                            <div class="layui-input-inline" style="width: 233px">
                                <input type="text" name="idcard" required lay-verify="required" placeholder="请输入身份证号"
                                       autocomplete="off"
                                       class="layui-input" style="width: 232px;">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-inline" style="width: 100%;">
                                <button class="layui-btn" lay-submit lay-filter="formDemo" style="width: 100%;">注&nbsp;&nbsp;册</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>

    </div>
</div>

<div class="footer">
    <div class="footer-copy">
        <a href="#" target="_blank">关于维也纳</a>
        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
        <a href="#" target="_blank">APP下载</a>
        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
        <!-- <a href="/join/joinwyn.html" target="_blank">招商加盟</a> -->
        <a href="http://co.wyn88.com/" target="_blank">招商加盟</a>
        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
        <a href="https://www.wehotelpurchase.com/marketplace/zh/gpp" target="_blank">供应商</a>
        <!-- &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; -->

        <br>
        深圳市维也纳国际酒店管理有限公司 版权所有&nbsp;&nbsp;&nbsp;Copyright
        ©1998-2020&nbsp;&nbsp;&nbsp;wyn88.com&nbsp;&nbsp;&nbsp;粤ICP备09078541号-1
    </div>
</div>
<!-- <script type="text/javascript" src="./js/jquery-3.5.1.js"></script> -->
<script>
    layui.use(['element', 'layer', 'form'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var $ = layui.jquery;

        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/custom?method=add",
                data: data.field,  //当前表单里面填写的数据{name:'',name1:''}
                type: "post",
                success: function (r) {
                    alert(111111);
                    if (r==0) {
                        /*window.location.href = "login.jsp";*/
                        alert("手机号和密码错误！！！")
                    }else {
                        window.location.href = '${pageContext.request.contextPath}/coustom/login.jsp';
                    }
                }, error: function () {

                    alert("服务器错误");
                }

            })

            return false;
        });

        element.on("tab(test)", function (data) {
            if (data.index == 0) {
                $(".qykhqy").css("display", "none");
                $(".vip").css("display", "block");
            } else {
                $(".qykhqy").css("display", "block");
                $(".vip").css("display", "none");
            }
        })

        var show_num = [];
        draw(show_num);

        $("#canvas").on('click', function () {
            draw(show_num);
        })

        function draw(show_num) {
            var canvas_width = $('#canvas').width();
            var canvas_height = $('#canvas').height();
            var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
            var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            var aCode = sCode.split(",");
            var aLength = aCode.length; //获取到数组的长度

            for (var i = 0; i <= 3; i++) {
                var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
                var deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
                var txt = aCode[j]; //得到随机的一个内容
                show_num[i] = txt.toLowerCase();
                var x = 10 + i * 20; //文字在canvas上的x坐标
                var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
                context.font = "bold 23px 微软雅黑";

                context.translate(x, y);
                context.rotate(deg);

                context.fillStyle = randomColor();
                context.fillText(txt, 0, 0);

                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        }

        function randomColor() { //得到随机的颜色值
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
    });
</script>
</body>
</html>
